/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { View, TextInput, Linking, Text } from 'react-native';
import { Icon,  List, Button, InputItem, Tabs, TextareaItem } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';
import ImagePicker from 'react-native-image-crop-picker';
// import { TextInput, ScrollView } from 'react-native-gesture-handler';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class OpenImage extends PageBase {
	constructor(props) {
        super(props);
 		this.state = {
            //  报修类型
            type:0,
            imagePath:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544248773065&di=d0b528f4f2528860e5039697ea9d4e24&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01324f5542e4ee0000019ae9cf13d9.jpg%401280w_1l_2o_100sh.jpg',
         }
    }

    /************************************************************************************ Event */
    
    // 选择图片
    selectImage = e => {
        ImagePicker.openPicker({
            width: Config.map.screen.width, 
            height: Config.map.screen.height-110, 
            cropping: true,
            compressImageQuality:0.5,
            loadingLabelText:'上传图片中'
         }).then(image => { 
            let path = image.path;
            this.setState({
                imagePath:path
            })
         });
    }

    // 删除以上传图片
    deleteImage = ( index ) => {
        this.setState({
            imagePath:''
        })
    }
    

    /************************************************************************************ Render */
	render() {
		return (
			<CPage>
                <CScroll mt='96'>
                    {
                        this.state.type == 0 &&
                        <CColumn style={{width:'100%',height:Config.map.screen.height-71}} bg='#000' x='center' y='center'>
                            <CImage source={{uri:this.state.imagePath}} style={{width:'100%',height:'100%'}} resizeMode={'contain'} ></CImage>
                        </CColumn>
                    }

                    {
                        this.state.type == 1 &&<CColumn mb='80' style={{width:'100%',height:Config.map.screen.height-110}} bg='#000' x='center' y='center'>
                            <CImage source={{uri:this.state.imagePath}} style={{width:'100%',height:'100%'}} resizeMode={'contain'} ></CImage>
                        </CColumn>
                    }
                    
                </CScroll>
				
                {/* header */}
				<PHeader nav={this.nav}>查看图片</PHeader>

                {
                    this.state.type == 1 &&
                    <CFooter>
                        <CBetween h='80' y='center' px='30' bg='#000e'>
                            <CText size='30' color='#fff' px='10' onPress={e=>this.selectImage()}>更换</CText>
                            <CText size='30' color='#fff'>删除</CText>
                        </CBetween>
                    </CFooter>
                }
                
                
			</CPage>
		);
	}
}



